<template>
  <div ref="container">
    <breadcrumb :breadList="breadList" :name="name">
      <div class="handle-box" slot="handleContent">
        <div class="handle-btn">
          <a-button class="common-btn" @click="exportList">导出列表</a-button>
        </div>
      </div>
    </breadcrumb>
    <a-card>
      <a-form @submit="handleSubmit" :form="form">
        <a-card title="供应商质量评价" :bordered="false">
          <a-row clss="form-row" :gutter="16">
            <a-col :lg="12" :md="12" :sm="24">
              <a-card title="设备COP排行榜">
                <a-table
                  :columns="columns"
                  :dataSource="loadData"
                  bordered
                  :loading="loading"
                  :pagination="false">
                </a-table>
              </a-card>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-card title="客户满意度排行榜">
                <a-table
                  :columns="columns"
                  :dataSource="loadData"
                  bordered
                  :loading="loading"
                  :pagination="false">
                </a-table>
              </a-card>
            </a-col>
          </a-row>
          <a-row clss="form-row" :gutter="16">
            <a-col :lg="12" :md="12" :sm="24">
              <a-card title="投诉率排行榜">
                <a-table
                  :columns="columns"
                  :dataSource="loadData"
                  bordered
                  :loading="loading"
                  :pagination="false">
                </a-table>
              </a-card>
            </a-col>
            <a-col :lg="12" :md="12" :sm="24">
              <a-card title="响应及时率排行榜">
                <a-table
                  :columns="columns"
                  :dataSource="loadData"
                  bordered
                  :loading="loading"
                  :pagination="false">
                </a-table>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import Breadcrumb from '@/components/tools/Breadcrumb'
// import { getSupplierList } from '@/api/mockdata'
export default {
  name: 'QualityEvaluation',
  components: {
    Breadcrumb
  },
  data () {
    return {
      name: '',
      breadList: [],
      loading: false,
      form: this.$form.createForm(this),
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '序号',
          width: '15%',
          dataIndex: 'proCode'
        }, {
          title: '设备企业名称',
          width: '30%',
          dataIndex: 'equName'
        }, {
          title: '产品名称',
          width: '25%',
          dataIndex: 'proName'
        }, {
          title: '质量评分',
          width: '25%',
          dataIndex: 'rate'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: []
    }
  },
  created () {
    this.loading = true
    this.getBreadCrumb()
    setTimeout(() => {
      this.getData('1')
    }, 1000)
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
    },
    getData (code) {
      const data = [
        {
          proCode: '1',
          equName: '奥克斯',
          proName: '天地壹号',
          rate: '99'
        }, {
          proCode: '2',
          equName: '海尔',
          proName: '天地壹号',
          rate: '99'
        }, {
          proCode: '3',
          equName: '美的',
          proName: '天地壹号',
          rate: '99'
        }
      ]
      if (code === '1') {
        this.loadData = data
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } else {
        this.loadData = data
        setTimeout(() => {
          this.loading = false
          this.$success({
            title: '查询成功'
          })
        }, 1000)
      }
    },
    toSearch (status) {
      this.loading = true
      this.getData(status)
    },
    handleSubmit () {
      console.log('ttt')
    },
    exportList () {
      this.$success({
        title: '导出成功'
      })
    },
    closeModel () {
      this.getData('2')
    },
    go_toOperation (type, record) {
      console.log('========', record)
      if (type !== 'create' && type !== 'modify') {
        this.$router.push({
          name: 'proDetails',
          query: {
            proDetails: JSON.stringify(record)
          }
        })
      } else {
        this.$router.push({
          name: 'addProjects',
          query: {
            type: type,
            proDetails: JSON.stringify(record)
          }
        })
      }
    }
  }
}

</script>

<style lang="less" scoped>
// .handle-box {
//   display: flex;
//   margin-bottom: 10px;
//   margin-left: 800px;
// }
// .handle-btn {
//   margin-left:5px;
// }
</style>
